<template>
      <div class="content">
        <div class="login_content">
          <h2>登陆</h2>
          <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm">
            <el-form-item prop="account">
              <el-input type="text" v-model="ruleForm.account" autocomplete="off" placeholder="请输入用户名"></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input type="password" v-model="ruleForm.password" autocomplete="off" placeholder="请输入密码" show-password></el-input>
            </el-form-item>
            <el-form-item prop="tenant">
              <el-input type="password" v-model="ruleForm.tenant" autocomplete="off" placeholder="请输入租户号"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" style="width: 100%" @click="loginToIdentify">登陆</el-button>
            </el-form-item>
          </el-form>
          <div class="verify" v-show="seen">
            <slide-verify :l="42"
            :r="10"
            :w="310"
            :h="155"
            slider-text="向右滑动"
            @success="onSuccess"
            @fail="onFail"
            ></slide-verify>
          </div>
        </div>
      </div>
  </template>
  
  <script>
      export default {
          name: "PageLogin",
          data() {
              return {
                  seen:false,
                  ruleForm: {
                      account: '',
                      password: '',
                      tenant:'',
                  },
                  rules: {
                      account: [
                          { required:true, message:'用户名不能为空！',trigger: 'blur' },
                          { min:11,max:11,message: '账号长度不符合要求！',trigger: 'blur'}
                      ],
                      password: [
                          { required:true, message:'密码不能为空！',trigger: 'blur' },
                          { min:8,max:16,message: '字段长度必须在 8 到 16 个字符之间',trigger: 'blur'},
                          { pattern: /^[A-Za-z0-9]+$/,message: '字段只能包含字母和数字'}
                      ],
                      tenant: [
                          { required:true, message:'租户号不能为空！',trigger: 'blur' },
                          { min:11,max:11,message: '账号长度不符合要求！',trigger: 'blur'}
                      ],
                  },

              };
          },
          methods: {
            loginToIdentify(){
                this.seen=true;
            },
            onSuccess(){
                this.$message({
                    message:'验证成功',
                    type:'success',
                })
                this.$router.push('./')
            },
            onFail(){
                this.$message({
                    message:'验证失败',
                    type:'error',
                })
            },
          }
      }
  </script>
  
  <style scoped>
    .content {
      display: flex;         
      justify-content: center;
      align-items: center;    
      height: 100vh;         
      width: 100%;
      min-width: 1240px;
      overflow: hidden;
      background-color: #B3C0D1;
      background-image: url("../../assets/image/LoginImg.jpg");
      background-size: cover; 
      background-position: center;
    }
    .login_content{
      margin: 130px auto;
      padding: 30px;
      width: 390px;
      height: 350px;
      background-color: white;
      box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
      border-radius: 10px;
    }
    h2{
      text-align: center;
      margin-bottom: 30px;
    }
    .verify{
      margin-top:-300px;
      margin-left:300px;
    }
  </style>